<template>
	<view class="work-container">
		<view class="top">
			<view class="image" style="position: relative;">
				<view v-if='captureUrl' class="details-icon-search" @click="searchAgain(captureUrl)"></view>
				<image-view class="img" v-if="captureUrl" :big="true" :src="captureUrl" :qj='panoramaUrl'></image-view>
			</view>
			<view class="Proportion_box">
				<view class="Proportion">{{ fraction | toPercent() }}</view>
			</view>
			<view class="image" style="position: relative;">
				<view v-if='faceUrl' class="details-icon-search" @click="searchAgain2(faceUrl)"></view>
				<image-view class="img" v-if="faceUrl" :src="faceUrl" :big="true" :qj="faceUrl"></image-view>
			</view>
		</view>
		<view class="text">
			<view class="txt">{{ $t('search:snapshot') }}</view>
			<view class="txt">{{ $t('search:registrationPhoto') }}</view>
		</view>
		<ul class="ul">
			<li class="li">
				<view class="title">{{ $t('search:name') }}</view>
				<view class="tit">{{ name }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:gender') }}</view>
				<view class="tit">{{ formatSex }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:age') }}</view>
				<view class="tit">{{ age }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:idNumber') }}</view>
				<view class="tit">{{ certificateNo }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:baseLibrary') }}</view>
				<view class="tit">{{ reservoir }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:remark') }}</view>
				<view class="tit" :class="['this.mask' == null ? '' : 'remark']">{{ mask }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureDevice') }}</view>
				<view class="tit">{{ equipment }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureTime') }}</view>
				<view class="tit">{{ captureTime }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:captureAddress') }}</view>
				<view class="tit">{{ address }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:location') }}</view>
				<view class="tit blue-txt" @click="gotoMap" v-if="lng != null && lat != null">{{ lng }},{{ lat }}</view>
				<view class="tit " v-else>{{ $t('warn:noData') }}</view>
			</li>
		</ul>
		<view style="width: 750rpx;height: 120rpx;"></view>
		<view class="btns">
			<button size="mini" type="primary" @click="PCupdata(1)">{{ $t('warn:ok') }}</button>
			<button size="mini" type="default" @click="PCupdata(2)">{{ $t('warn:cancel') }}</button>
			<button size="mini" type="primary" @click="PCupdata(3)" style="background-color: #e6a23c;">{{
				$t('warn:doubtful') }}</button>
		</view>
	</view>
</template>

<script>
import { PCupdataTypeface } from '@/api/warning/index.js'
export default {
	data() {
		return {
			list: [],
			name: '',
			sex: '',
			age: '',
			certificateNo: '',
			reservoir: '',
			mask: '',
			equipment: '',
			time: '',
			address: '',
			fraction: '',
			faceUrl: '',
			captureUrl: '',
			panoramaUrl: '',
			lng: '',
			lat: '',
			alarmId: '',
		}
	},
	computed: {
		captureTime() {
			const num = this.time
			if (num == '' || num == null) {
				return this.$t('search:none')
			} else {
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			}
		},
		formatSex() {
			const str = this.sex,
				sexEnum = {
					"1": this.$t('search:male'),
					"2": this.$t('search:female'),
				}
			return sexEnum[str] || '--'
		}
	},
	onLoad(option) {
		this.setDetail(JSON.parse(option.data))
		this.alarmId = option.alarmId
	},
	methods: {
		searchAgain(src) {
			var obj = {}
			obj.imgUrl = src
			obj.showType = 1
			this.$tab.redirectTo('/pages/search/rljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
		},
		searchAgain2(src) {
			var obj = {}
			obj.imgUrl = src
			obj.showType = 1
			this.$tab.redirectTo('/pages/search/rljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
		},
		//位置详情页面
		gotoMap() {
			this.$tab.navigateTo('/pages/warning/components/map_one?lng=' + this.lng + '&lat=' + this.lat)
		},
		setDetail(data) {
			this.fraction = data.topns[0].simScore ? data.topns[0].simScore : this.$t('search:none')
			this.name = data.topns[0].faceName ? data.topns[0].faceName : this.$t('search:none')
			this.sex = data.topns[0].faceGender ? data.topns[0].faceGender : this.$t('search:none')
			this.age = data.age ? data.age : this.$t('search:none')
			this.certificateNo = data.topns[0].faceCardId ? data.topns[0].faceCardId : this.$t('search:none')
			this.reservoir = data.topns[0].facedbName ? data.topns[0].facedbName : this.$t('search:none')
			this.mask = data.topns[0].remark ? data.topns[0].remark : this.$t('search:none')
			this.equipment = data.deviceName ? data.deviceName : this.$t('search:none')
			this.time = data.captureTime
			this.address = data.deviceAddress ? data.deviceAddress : this.$t('search:none')
			this.faceUrl = data.topns[0].faceUrl
			this.captureUrl = data.captureUrl
			this.panoramaUrl = data.panoramaUrl
			this.lng = data.lng
			this.lat = data.lat
		},
		// pc端研判结果 1 确定 2取消 3存疑
		PCupdata(index) {
			PCupdataTypeface({
				alarmId: this.alarmId,
				isAlarm: index,
			}).then(res => {
				if (res.code == '00000000') {
					uni.reLaunch({
						url: '/pages/warning/index'
					})
				}
			})
		}
	},
	filters: {
		toPercent: function (point) {
			var str = Number(point * 100).toFixed();
			str += "%";
			return str;
		}
	}
}
</script>

<style>
page {
	background-color: #fff;
}

.top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 40rpx 40rpx 10rpx 40rpx;
}

.top .image {
	width: 35%;
}

.image .img {
	width: 235rpx;
	height: 235rpx;
	border-radius: 10rpx;
}

.Proportion_box {
	width: 30%;
	padding: 30rpx 30rpx;
}

.Proportion {
	width: 148rpx;
	height: 148rpx;
	font-size: 40rpx;
	color: #2979ff;
	border-radius: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #2979ff;
}

.text {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx 30rpx 40rpx;
}

.text .txt {
	width: 35%;
	text-align: center;
	color: #8d8d8d;
}

.ul {
	padding: 0 40rpx;
}

.li {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 30rpx 0;
	border-bottom: 1px solid #ddd;
}

.li .title {
	color: #595959;
	width: 30%;
}

.li .tit {
	width: 70%;
	color: #000;
	display: flex;
	justify-content: flex-end;
}

.blue-txt {
	color: #2979ff !important;
}

.btns {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	background-color: #fff;
	display: flex;
	justify-content: center;
}

.btns button {
	width: 200rpx;
	padding: 5rpx 0;
	margin: 20rpx auto;
}

.details-icon-search {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 0;
	right: 0px;
	z-index: 1;
	background: url('../../../static/images/icon_search.png');
	background-size: 100% 100%;
}
</style>